<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app';
import { getShaiJianDanCi, submitListenApi, tijiaoshaijianApi } from '/api/request.js';
let platform = uni.getStorageSync('platform');
const props = defineProps({});
// 1美 2英
const type = ref(2);
const list = ref(null);
const record2_id = ref('');
const query = ref({});
onLoad(async (e) => {
    if (uni.getStorageSync('bofangmoshi')) {
        type.value = uni.getStorageSync('bofangmoshi');
    }
    query.value.record2_id = e.id;
    query.value.wordpackage_id = e.ids;
    query.value.index = e.index;
    query.value.all = e.all;
    let res = await getShaiJianDanCi({
        record2_id: query.value.record2_id
    });
    console.log(res);
    list.value = res.data;
    console.log(list.value);
    if (!list.value.length) {
        uni.showToast({
            title: '暂无数据',
            icon: 'none',
            duration: 2000
        });
        return;
    }
    play();
    console.log(list.value);
});
onHide(() => {
    uni.$emit('pause');
});
onUnload(() => {
    uni.$emit('pause');
});
const center = ref(null);
const selectIndex = ref(0);
const play = () => {
    let http =
        type.value == 1
            ? 'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_word/'
            : 'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/';
    uni.$emit(
        'playAudio',
        http + `${list.value[selectIndex.value].detail.word_audio_url_en}`,
        true
    );
};
const goback = () => {
    uni.navigateBack();
};
const count = ref(5);
const timer = ref(null);
const timers = ref(null);
const selectFanyi = computed(() => {
    if (!list.value || !list.value.length) return [];
    let arr = [];
    arr.push(list.value[selectIndex.value].detail.means);
    arr = arr.concat(list.value[selectIndex.value].detail.error);
    for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    console.log(arr);
    return arr;
});
const one = ref(new Set());
const two = ref(new Set());
const there = ref(new Set());
const startTimerOut = () => {
    timer.value = setInterval(() => {
        count.value--;
    }, 1000);
};
startTimerOut();
const clear = () => {
    count.value = 5;
    clearInterval(timer.value);
    timer.value = null;
    statusClass.value = null;
};
const time = ref(null);
const statusClass = ref(null);
const clickItem = async (item, index) => {
    if (statusClass.value || statusClass.value == 0) {
        return;
    }
    statusClass.value = index;
    const targetWord = list.value[selectIndex.value].detailmeans;
    const name = list.value[selectIndex.value].id;
    if (count.value >= 0) {
        item === targetWord ? one.value.add(name) : there.value.add(name);
    } else {
        item !== targetWord ? there.value.add(name) : two.value.add(name);
    }
    if (list.value.length == selectIndex.value + 1) {
        clearTimeout(timers.value);
        timers.value = null;
        let res = await tijiaoshaijianApi({
            record2_id: query.value.record2_id,
            wordpackage_id: query.value.wordpackage_id,
            correct_word: Array.from(one.value).join(','),
            correct_word2: Array.from(two.value).join(','),
            error_word: Array.from(there.value).join(',')
        });
        console.log(res);
        if (res.code == 1) {
            const now = new Date();
            time.value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(
                2,
                '0'
            )}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(
                2,
                '0'
            )}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(
                2,
                '0'
            )}`;
            center.value.open('center');
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
        return;
    }
    timers.value = setTimeout(() => {
        clear();
        selectIndex.value++;
        startTimerOut();
        play();
        clearTimeout(timers.value);
        timers.value = null;
    }, 1200);
};
onHide(() => {
    if (timer.value) {
        clearInterval(timer.value);
    }
});
onUnload(() => {
    if (timer.value) {
        clearInterval(timer.value);
    }
});
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> 筛检单词 </view>
            <image
                style="opacity: 0"
                class="left"
                src="/static/img/goback-black.png"
                mode="widthFix"
            />
        </view>
        <view class="daojishi"> 倒计时：{{ count >= 0 ? count : 0 }}s </view>
        <view class="select-info uni-row" v-if="list && list.length">
            <view class="left uni-col">
                <view class="title">
                    {{ list[selectIndex]?.name }}
                </view>
                <view class="label yinbiao">
                    /{{ list[selectIndex]?.detail.word_phonetic_symbol_en }}/
                </view>
            </view>
            <image @click="play" src="/static/img/laba.png" class="laba"></image>
        </view>

        <scroll-view
            scroll-y="true"
            v-if="list && list.length"
            :style="{ height: platform.gaodu - platform.dingbu - 96 - 28 - 146 - 90 - 28 + 'rpx' }"
        >
            <view class="body uni-col">
                <view class="list">
                    <view
                        @click="clickItem(item, index)"
                        class="item uni-row"
                        v-for="(item, index) in selectFanyi"
                        :key="index"
                        :class="
                            statusClass == index && item == list[selectIndex]?.detail.means
                                ? 'active'
                                : statusClass == index && item != list[selectIndex]?.detail.means
                                ? 'default'
                                : ''
                        "
                    >
                        {{ item }}
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="nothing" v-if="list && list.length < 1">
            <image src="/static/img/nothing.png" class="img"></image>
            <view class="label"> 哎呀，这里什么内容都没有 </view>
        </view>
    </view>
    <view class="footers uni-row" v-if="list && list.length">
        <view class="liang"> {{ selectIndex + 1 }} / {{ list.length }} </view>
    </view>
    <uni-popup ref="center" :mask-click="false">
        <view class="wai">
            <view class="header-close">
                <image src="/static/img/user/world/close.png" @click="goback" class="icon"></image>
            </view>
            <view class="limian">
                <view class="title"> 单词筛选报告{{ query.index }} </view>
                <view class="byn"> 小学阶段总词数 </view>
                <view class="byn">
                    {{ query.all }}
                </view>
                <view class="uni-row list">
                    <view
                        class="item"
                        v-for="(item, index) in 3"
                        :key="index"
                        :style="{
                            background: `url('/static/img/user/jie${index + 1}.png')`,
                            backgroundSize: '100% 100%'
                        }"
                        :class="index == 0 ? 'active' : index == 1 ? 'default' : 'xxx'"
                    >
                        <template v-if="index == 0">
                            <view class="label"> 正确: {{ one.size + two.size }} </view>
                            <view class="label"> 错误: {{ there.size }} </view>
                        </template>
                        <template v-if="index == 1">
                            <view class="label"> 正确率: </view>
                            <view class="label" v-if="list && list.length">
                                {{ (((one.size + two.size) / list.length) * 100).toFixed(2) }}%
                            </view>
                        </template>
                        <template v-if="index == 2">
                            <view class="label"> 错误率: </view>
                            <view class="label" v-if="list && list.length">
                                {{ ((there.size / list.length) * 100).toFixed(2) }}%
                            </view>
                        </template>
                    </view>
                </view>
                <view class="time">
                    {{ time }}
                </view>
            </view>
        </view>
    </uni-popup>
</template>

<style scoped lang="less">
.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .daojishi {
        text-align: center;
        font-size: 28rpx;
        color: #f36161;
        height: 28rpx;
    }

    .select-info {
        justify-content: center;
        height: 146rpx;
        margin-top: 90rpx;

        .left {
            align-items: center;
            margin-right: 40rpx;

            .title {
                font-weight: 500;
                font-size: 68rpx;
                color: #333333;
            }

            .label {
                font-size: 32rpx;
                color: #666666;
            }
        }

        .laba {
            width: 58rpx;
            height: 50rpx;
            font-size: 32rpx;
            color: #666666;
        }
    }

    .body {
        justify-content: space-between;
        height: 100%;
        padding: 74rpx 0 80rpx;

        .list {
            .item {
                justify-content: center;
                width: 574rpx;
                height: 98rpx;
                background: #fff;
                border-radius: 16rpx;
                margin: 0 auto 40rpx;

                &:last-child {
                    margin-bottom: 0;
                }

                &.active {
                    background-color: #5bd145;
                    color: #fff;
                }

                &.default {
                    background-color: #ef4828;
                    color: #fff;
                }
            }
        }
    }
}

.footers {
    position: fixed;
    left: 50%;
    bottom: 28rpx;
    transform: translate(-50%, 0);
    justify-content: center;

    .liang {
        font-size: 24rpx;
        color: #333333;
        // margin: 0 26rpx;
    }

    .icon {
        justify-content: center;
        padding: 0 26rpx;
    }

    .last,
    .next {
        width: 40rpx;
        height: 40rpx;
    }
}

.wai {
    .header-close {
        text-align: right;

        .icon {
            width: 64rpx;
            height: 64rpx;
        }
    }

    .limian {
        padding: 42rpx 28rpx;
        margin-top: 20rpx;
        width: 672rpx;
        background: #ffffff;
        border-radius: 32rpx;

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            text-align: center;
            margin-bottom: 40rpx;
        }

        .byn {
            text-align: center;
            font-weight: 500;
            font-size: 44rpx;
            color: #9561f3;
            margin-bottom: 10rpx;
        }

        .list {
            margin-top: 30rpx;

            .item {
                flex: 1;
                font-size: 28rpx;
                height: 200rpx;
                padding: 60rpx 0 0 30rpx;

                &:nth-child(2) {
                    margin: 0 20rpx;
                }

                &.active {
                    color: #59492c;
                }

                &.default {
                    color: #6489fa;
                }

                &.xxx {
                    color: #ef4828;
                }
            }
        }

        .time {
            text-align: center;
            margin-top: 30rpx;
            font-size: 24rpx;
            color: #333333;
        }
    }
}
</style>
